<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
        .grid {
            margin: auto;
            width: 530px;
            text-align: center;
        }

        .grid table {
            border-top: 1px solid #C2D89A;
            width: 100%;
            border-collapse: collapse;
        }

        .grid th,
        td {
            padding: 10;
            border: 1px dashed #F3DCAB;
            height: 35px;
            line-height: 35px;
        }

        .grid th {
            background-color: #F3DCAB;
        }

        .grid .book {
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: #F3DCAB;
        }

        .grid .total {
            height: 30px;
            line-height: 30px;
            background-color: #F3DCAB;
            border-top: 1px solid #C2D89A;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="grid">
            <div>
                <h1>图书管理</h1>
                <div class="book">
                    <div>
                        <label for="id"> 编号： </label>
                        <input type="text" id="id" v-model="id" disabled />
                        <label for="name"> 名称： </label>
                        <input type="text" id="name" v-model="name" v-focus autocomplete="off" />
                        <button @click="handle" :disabled="isSubmit">提交</button>
                    </div>
                </div>
            </div>
            <div class="total"><span>图书总数：</span> <span>{{books.length}}</span>计算属性:{{count}}</div>
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in books" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date | datatime("yyyy-MM-DD hh:mm:ss")}}</td>
                        <td>
                            <a href="#" @click.prevent="edit(item.id)">修改</a>
                            <span>|</span>
                            <a href="#" @click.prevent="del(item.id)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script>
        // 设置基地址
        axios.defaults.baseURL = "http://localhost:3000/";

        // 设置响应拦截器
        axios.interceptors.response.use(
            function (response) {
                return response.data;
            },
            function (error) {
                return Promise.reject(error);
            }
        );

        // 自定义指令 获取焦点
        Vue.directive('focus', {
            inserted(el) {
                el.focus()
            }
        })

        // 时间过滤器
        Vue.filter('datatime', function (val, param) {
            // console.log(val); 参数val是要过滤的数据 参数param是用户传递的参数
            const date = new Date(val)
            const year = date.getFullYear()
            const month = date.getMonth() + 1
            const day = date.getDate()

            const h = date.getHours()
            const m = date.getMinutes()
            const s = date.getSeconds()

            if (param == 'yyyy') {
                return `${year}`
            } else if (param == 'yyyy-MM-DD') {
                return `${year}-${month}-${day}`
            } else if (param == 'yyyy-MM-DD hh:mm:ss') {
                return `${year}-${month}-${day} ${h}:${m}:${s}`
            }
        })

        new Vue({
            el: "#app",
            data: {
                // id
                id: "",
                // 图书的name
                name: "",
                // 设置添加或编辑的开关
                isEdit: false,
                // 控制提交按钮的开关
                isSubmit: false,
                books: []
            },
            // 计算属性
            computed: {
                count() {
                    return this.books.length
                }
            },
            // 钩子函数
            async created() {
                // 发送请求, 获取到数组数据
                // axios.get('books').then(res => {
                //     this.books = res
                // })
                // this.books = await axios.get('books')
                this.getBooks()
            },
            // 侦听器
            watch: {
                async name(val) {
                    const res = await axios.get('books/book/' + val)
                    console.log(res);
                     // 1 表示的是存在  2 表示不存在
                    this.isSubmit = res.status = 1 ? true : false
                }
            },
            methods: {
                // 单独封装一个获取图书的方法
                async getBooks() {
                    this.books = await axios.get('books')
                },
                // 添加图书的方法 
                async handle() {
                    if (!this.name) return; // 判断name是否为空

                    // 添加的业务逻辑
                    if (this.isEdit == false) {
                        const res = await axios.post('books', {
                            name: this.name
                        })
                        if (res.status == 200) {
                            this.getBooks()
                        }

                    } else {
                        // 修改的业务逻辑
                        // 当我们点击修改按钮之后,data中的id和name已经赋值了
                        const res = await axios.put('books/' + this.id, {
                            name: this.name
                        })
                        console.log(res);
                        if (res.status == 200) {
                            this.getBooks()
                        }
                        // 修改结束之后将开关设置为 false
                        this.isEdit = false
                    }
                    // 提交完毕将表单清空 
                    this.id = this.name = '';
                },
                // 删除图书的方法
                async del(id) {
                    // 将删除的图书的id接受,  数组的截取 或 数组的过滤
                    console.log(id);
                    const res = await axios.delete('books/' + id)
                    if (res.status == 200) {
                        this.getBooks()
                    }
                },
                //  修改图书
                async edit(id) {
                    // 点击修改按钮  将edit 设置为true
                    this.isEdit = true

                    const res = await axios.get('books/' + id)
                    console.log(res);
                    this.id = res.id
                    this.name = res.name
                }
            },
        });
    </script>
</body>

</html>